<template>
  <view class="container">
    <!-- 顶部状态栏 -->
    <view class="header">
      <text class="title">我的</text>
    </view>
    
    <!-- 主内容区 -->
    <view class="content">
      <!-- 用户信息 -->
      <view class="user-info">
        <image class="user-avatar" :src="userInfo.avatar" mode="aspectFill"></image>
        <view class="user-details">
          <text class="user-name">{{ userInfo.name }}</text>
          <text class="user-id">学号：{{ userInfo.studentId }}</text>
        </view>
      </view>
      
      <!-- 功能菜单 -->
      <view class="menu-list">
        <view class="menu-item" @click="navigateTo('/pages/user/myreviews')">
          <view class="menu-icon">
            <text class="iconfont">&#xe6b5;</text>
          </view>
          <text class="menu-text">我的评价</text>
          <text class="menu-arrow iconfont">&#xe6a1;</text>
        </view>
        
        <view class="menu-item" @click="navigateTo('/pages/user/changepassword')">
          <view class="menu-icon">
            <text class="iconfont">&#xe6a9;</text>
          </view>
          <text class="menu-text">修改密码</text>
          <text class="menu-arrow iconfont">&#xe6a1;</text>
        </view>
      </view>
      
      <!-- 退出登录 -->
      <view class="logout-container">
        <button class="logout-btn" @click="logout">退出登录</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: '张同学',
        studentId: '2023001001',
        avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3'
      }
    }
  },
  methods: {
    navigateTo(url) {
      // 直接使用 navigateTo，因为我们确定这些不是 tabBar 页面
      uni.navigateTo({
        url: url
      });
    },
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除登录状态
            uni.removeStorageSync('token');
            uni.removeStorageSync('userInfo');
            
            // 跳转到登录页
            uni.reLaunch({
              url: '/pages/login/login'
            });
          }
        }
      });
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #F5F5F5;
}

.header {
  padding: 40rpx;
  background-color: #FF7A45;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title {
  color: #FFFFFF;
  font-size: 36rpx;
  font-weight: bold;
}

.content {
  flex: 1;
  padding: 30rpx;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.user-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  object-fit: cover;
}

.user-details {
  margin-left: 30rpx;
}

.user-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #262626;
  display: block;
  margin-bottom: 10rpx;
}

.user-id {
  font-size: 24rpx;
  color: #8C8C8C;
}

.menu-list {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #F0F0F0;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-icon {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20rpx;
}

.menu-icon .iconfont {
  font-size: 36rpx;
  color: #FF7A45;
}

.menu-text {
  flex: 1;
  font-size: 28rpx;
  color: #262626;
}

.menu-arrow {
  font-size: 28rpx;
  color: #BFBFBF;
}

.logout-container {
  margin-top: 60rpx;
}

.logout-btn {
  width: 100%;
  height: 90rpx;
  background-color: #FFFFFF;
  color: #FF4D4F;
  font-size: 32rpx;
  border-radius: 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}
</style> 